@import '~@reach/listbox/styles.css';

.list {
    display: block;
    position: static;
    width: 100%;
    overflow: auto;
    max-height: 24rem;
    // This value is synced with dashboard select input width
    max-width: 22.75rem;

    &:focus {
        // Reach-ui implicitly reset box-shadow to none if list element is focused
        // to preserve visual state we have to explicitly set a box shadow value to
        // our standard --dropdown-shadow
        box-shadow: var(--dropdown-shadow);
    }
}

.popover {
    // Reset reach-ui styles for popover element.
    outline: none !important;
    box-shadow: none !important;
    border: none;
    background: none;
}

.group-label {
    font-weight: normal;
    font-size: 0.75rem;
    border-top: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem 0;
}

.option {
    margin: 0.25rem 0;

    & + & {
        margin-top: -0.25rem;
    }
}
